{% extends './management_base.html' %}

{% block title %}编辑博文{% end %}

{% block body %}
<div class="container">
    <div class="page-header">
        <h1 class="page-title">
            编辑博文
        </h1>
    </div>
    <div class="row">
        <form class="card dimmer">
            <div class="card-body dimmer-content">
                <div class="loader"></div>
                <div class="row">
                    <input type="hidden" name="post_id" value="{{post['id']}}">
                    <div class="form-group col-md-12">
                        <label class="form-label">文章标题</label>
                        <input type="text" class="form-control" name="title" placeholder="标题.." value="{{post['title']}}">
                    </div>
                    <div class="form-group col-md-3">
                        <label class="form-label">分类选择</label>
                        <select name="category" class="form-control custom-select">
                            {% for cate in category_list %}
                                {% if cate.id == post['category_id']  %}
                                    <option selected="selected" value="{{ cate.id }}">{{ cate.name }}</option>
                                {% else %}
                                    <option value="{{ cate.id }}">{{ cate.name }}</option>
                                {% end %}
                            {% end %}
                            <!-- <option selected="selected" value="6">June</option> -->
                        </select>
                    </div>
                    <div class="form-group col-md-9">
                        <div class="form-label">标签选择</div>
                        <div>
                            {% for tag in tag_list %}
                                <label class="custom-control custom-checkbox custom-control-inline">
                                    {% if tag.is_checked == 1 %}
                                    <input type="checkbox" class="custom-control-input" name="tag" value="{{ tag.id }}" checked>
                                    {% else %}
                                    <input type="checkbox" class="custom-control-input" name="tag" value="{{ tag.id }}">
                                    {% end %}
                                    <span class="custom-control-label">{{ tag.name }}</span>
                                </label>
                            {% end %}
                        </div>
                    </div>
                    <div class="form-group col-md-12">
                        <label class="form-label">内容 </label>
                        <textarea class="form-control" name="content" rows="6" placeholder="内容.."
                                  style="height: 500px; font-size: 18px;">
                        {{ post['content'] }}
                        </textarea>
                    </div>
                    <div class="form-group col-md-12 text-right">
                        <button type="button" class="btn btn-primary ml-auto" onclick="updatePost()">更改</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    require(['jquery'], function ($) {
    });

    function updatePost(){
        let inputId = $("input[name=post_id]").val()
        let inputTitle = $("input[name=title]").val()
        let inputCategory = $("select[name=category]").val()
        let inputContent = $("textarea[name=content]").val()
        let inputTag = []
        $("input[name=tag]:checked").each(function(i){
            inputTag[i] = $(this).val()
        })
        if (inputTitle=="" || inputContent==""){
            showAlert(0, "标题和内容不能为空！")
            return false
        }

        data_form = {
            post_id: inputId,
            title: inputTitle,
            category_id: inputCategory,
            tags: inputTag,
            content: inputContent,
        }
        console.log(data_form)
        $(".dimmer").addClass("active")
        $.ajax("/api/update_post", {
            method: "POST",
            contentType: "application/json",
            dataType: "json",
            headers: {},
            data: JSON.stringify(data_form)
        }).done(function(data){
            showAlert(data["status"], data["msg"])
        }).fail(function(xhr, error){

        }).always(()=>{
            $(".dimmer").removeClass("active")
        })
    }
</script>
{% end %}